/* Element Plus 主题配置 */
:root {
  /* 主色调 - 使用项目的主色 */
  --el-color-primary: #4caf50;
  --el-color-primary-light-3: #81c784;
  --el-color-primary-light-5: #a5d6a7;
  --el-color-primary-light-7: #c8e6c9;
  --el-color-primary-light-8: #e8f5e9;
  --el-color-primary-light-9: #f1f8e9;
  --el-color-primary-dark-2: #388e3c;

  /* 成功色 */
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;

  /* 警告色 */
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #cf9236;

  /* 危险色 */
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f78989;
  --el-color-danger-light-5: #f9a7a7;
  --el-color-danger-light-7: #fbc4c4;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #dd6161;

  /* 信息色 */
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #f2f3f5;
  --el-color-info-light-9: #fafafa;
  --el-color-info-dark-2: #73767a;

  /* 中性色 */
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;

  /* 边框色 */
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;

  /* 文字色 */
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;

  /* 圆角 */
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 20px;
  --el-border-radius-circle: 100%;

  /* 阴影 */
  --el-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);

  /* 字体 */
  --el-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --el-font-size-base: 14px;
  --el-font-size-small: 13px;
  --el-font-size-large: 16px;
  --el-font-size-extra-large: 18px;

  /* 间距 */
  --el-spacing-base: 8px;
  --el-spacing-small: 4px;
  --el-spacing-large: 16px;
  --el-spacing-extra-large: 24px;
}

/* Dialog 组件自定义样式 */
.el-dialog {
  border-radius: 16px !important;
  overflow: hidden;
}

.el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  padding: 20px 24px !important;
  margin: 0 !important;
}

.el-dialog__title {
  color: white !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: white !important;
  font-size: 18px !important;
}

.el-dialog__headerbtn:hover .el-dialog__close {
  color: #e3f2fd !important;
}

.el-dialog__body {
  padding: 24px !important;
}

.el-dialog__footer {
  padding: 16px 24px 24px !important;
  border-top: 1px solid #f0f0f0 !important;
}

/* Button 组件自定义样式 */
.el-button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  transition: all 0.3s ease !important;
}

.el-button--primary {
  background: var(--el-color-primary) !important;
  border-color: var(--el-color-primary) !important;
}

.el-button--primary:hover {
  background: var(--el-color-primary-dark-2) !important;
  border-color: var(--el-color-primary-dark-2) !important;
  transform: translateY(-2px) !important;
}

.el-button--default {
  background: var(--el-bg-color-page) !important;
  border-color: var(--el-border-color-light) !important;
  color: var(--el-text-color-regular) !important;
}

.el-button--default:hover {
  background: var(--el-border-color-lighter) !important;
  border-color: var(--el-border-color) !important;
  color: var(--el-text-color-primary) !important;
}